1 files changed, 75 insertions, 0 deletions
diff --git a/src/routes/[lang=lang]/sections/hero.svelte b/src/routes/[lang=lang]/sections/hero.svelte
new file mode 100644
index 0000000..3cdf221
--- /dev/null
+++ b/src/routes/[lang=lang]/sections/hero.svelte
@@ -0,0 +1,75 @@
+<script context="module" lang="ts">
+	export type HeroModel = {
+		title: string;
+		content?: any;
+	};
+</script>
+
+<script lang="ts">
+	import { PortableText } from "@portabletext/svelte";
+	export let model: HeroModel;
+
+	let visible = true;
+
+	$: if (!model.title) {
+		visible = false;
+	} else {
+		visible = true;
+	}
+</script>
+
+{#if visible}
+	<section class="has-section-divider-bottom bg-contrast-low/50">
+		<div class="py-20 lg:py-32">
+			<div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-lg md:max-w-3xl">
+				<div class="text-component">
+					<h1>{model.title}</h1>
+					{#if model.content}
+						<PortableText value={model.content} />
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<div class="section-divider">
+			<svg viewBox="0 0 1920 60" aria-hidden="true">
+				<path
+					class="fill-floor"
+					d="M-153.5,85.5a4002.033,4002.033,0,0,1,658-71c262.854-6.5,431.675,15.372,600,27,257.356,17.779,624.828,19.31,1089-58v102Z"
+				/>
+			</svg>
+		</div>
+	</section>
+{/if}
+
+<style lang="postcss">
+	:root {
+		--section-divider-width: 1920;
+		--section-divider-height: 60;
+		--section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
+	}
+
+	[class*="has-section-divider"] {
+		position: relative;
+	}
+
+	.has-section-divider-bottom {
+		padding-bottom: var(--section-divider-ratio);
+	}
+
+	.section-divider {
+		position: absolute;
+		bottom: -1px;
+		left: 0;
+		width: 100%;
+		overflow: hidden;
+	}
+	.section-divider svg {
+		position: relative;
+		display: block;
+		height: auto;
+		max-width: none;
+		width: 102%;
+		left: -1%;
+	}
+</style>